<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="com.cpfmat.common.Contains,com.cpfmat.entity.ContentUser,java.util.Set,java.util.Iterator,java.util.Map.Entry"%>
<%@ include file="/WEB-INF/jsp/common.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/WEB-INF/jsp/importHead.jsp"%>
<%@ include file="/WEB-INF/jsp/importCommonCss.jsp"%>
<link rel="stylesheet" type="text/css" href="${basePath }/css/index-old.css" />
<style>
.upload-img{position: relative;overflow: hidden;}
.upload-img input[type=file]{
	position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 50rem;
   }
.show_met_16_1 .nav {
	border: 1px solid #e4eaec;
}
.show_met_16_1 .nav .nav-link{
	color: #62a8ea;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}

.show_met_16_1 .nav .nav-link.active{
	color: #FFF;
    background-color: #0075c1;
}

.show_met_16_1 .nav .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
	color: #FFF;
    background-color: #0075c1;
}

.custom-nav{
	width: 160px;
	float: left;
}

.custom-content{
	width: calc(100% - 180px);
	margin-left: 20px;
	float: left;
}

.breadcrumb {
  padding: 8px 15px;
  margin: 0 0 20px;
  list-style: none;
}
.breadcrumb li {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  text-shadow: 0 1px 0 #ffffff;
}
.breadcrumb .divider {
  padding: 0 5px;
  color: #ccc;
}
.breadcrumb .active {
  color: #999999;
}
.red{
	color: red;
}
.bgcolor{
	background-color: #fff;
}
</style>
</head>

<body class="met-navfixed">
	<%@ include file="/WEB-INF/jsp/importHeader.jsp"%>

	<main class="show_met_16_1 met-show-body panel panel-body m-b-0" style="background-color: #F5F5F5;border-top: solid 2px #4ca8d8;">
		<div class="container">
			<ul class="breadcrumb" style="margin-bottom: 5px;">
		      <li><a href="${basePath }">首页</a><span class="divider">></span></li>
		      <li class="active">个人中心</li>
		  	</ul>
		  	
		  	<div class="col-xs-12">
				<div class="custom-nav bgcolor">
				    <ul class="nav nav-list" style="height: 200px;">
				      <c:if test="${onlyCollection ne true or onlyCollection ne 'true'}">				   
				      <li class="nav-item nav-tabs"><a class="nav-link text-xs-center p-t-1" href="${basePath }/personalCenter">个人设置</a></li>
				      <li class="nav-item nav-tabs"><a class="nav-link text-xs-center p-t-1" href="${basePath }/changePwd">密码修改</a></li>
				      </c:if>
				      <li class="nav-item nav-tabs"><a class="nav-link text-xs-center p-t-1 active" href="${basePath }/sendAtri?pageNum=1&onlyCollection=${onlyCollection}">材料报送</a></li>
				    </ul>
			    </div>
			    
			    <div class="custom-content bgcolor" style="min-height: 400px;border: 1px #dcdcdc solid;padding: 20px;">
			    	<form action="${basePath }/saveConetent?onlyCollection=${onlyCollection}" method="post" id="changeInfoForm" class="form-horizontal container">
					<input type="hidden" name="fileid" value="${content.sqlId }" />
					<input type="hidden" name="attachementIds" value="" />
			    		<div class="container-fluid form-group" style="border-bottom: 1px #dcdcdc dashed;padding-bottom: 10px;margin-bottom: 20px;">
							<label class="col-xs-12 form-control-label text-xs-left">
								<c:choose>
								<c:when test="${!empty content.sqlId }">
									<h4>修改材料报送</h4>
								</c:when>
								<c:otherwise>
									<h4>新增材料报送</h4>
								</c:otherwise>
								</c:choose>
							</label>
						</div>
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								报送事项：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<input type="text"  name="submission" value="${content.submission }" class="form-control" maxlength="200" />
								</div>
								<div class="col-xs-12 p-a-0">
									<label class="col-xs-6 form-control-label text-xs-left error-message red p-a-0">
										${submissionCode }
									</label>
								</div>
							</div>
						</div>
						
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								报送单位：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<input type="text"  name="unit" value="${content.unit }" class="form-control" maxlength="200" />
								</div>
								<div class="col-xs-12 p-a-0">
									<label class="col-xs-6 form-control-label text-xs-left error-message red p-a-0">
										${unitCode }
									</label>
								</div>
							</div>
						</div>
						
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								联系人：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<c:choose>
										<c:when test="${!empty content.contactPerson }">
											<c:set var="contactPerson" value="${content.contactPerson }"/>
										</c:when>
										<c:otherwise>
											<c:set var="contactPerson" value="${otherLoginUser.userName }"/>
										</c:otherwise>
									</c:choose>
									<input type="text"  name="contactPerson" value="${contactPerson }" class="form-control" maxlength="50" />
								</div>
								<div class="col-xs-12 p-a-0">
									<label class="col-xs-6 form-control-label text-xs-left error-message red p-a-0">
										${contactPersonCode }
									</label>
								</div>
							</div>
						</div>
						
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								联系电话：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<c:choose>
										<c:when test="${!empty content.contactPhone }">
											<c:set var="contactPhone" value="${content.contactPhone }"/>
										</c:when>
										<c:otherwise>
											<c:set var="contactPhone" value="${otherLoginUser.phonenum }"/>
										</c:otherwise>
									</c:choose>
									<input type="text"  name="contactPhone" value="${contactPhone }" class="form-control telephone" maxlength="18" />
								</div>
								<div class="col-xs-12 p-a-0">
									<label class="col-xs-6 form-control-label text-xs-left error-message red p-a-0">
										${contactPhoneCode }
									</label>
								</div>
							</div>
						</div>
						
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								技术成果名称：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<input type="text"  name="title" value="${content.title }" class="form-control" maxlength="200" />
								</div>
								<div class="col-xs-12 p-a-0">
									<label class="col-xs-6 form-control-label text-xs-left error-message red p-a-0">
										${titleCode }
									</label>
								</div>
							</div>
						</div>
						
						<%-- <div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								技术成果简介：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<input type="text" name="subTitle" value="${content.subTitle }" class="form-control" maxlength="200" />
								</div>
								<div class="col-xs-12 p-a-0">
									<label class="col-xs-6 form-control-label text-xs-left error-message red p-a-0">
										${subTitleCode }
									</label>
								</div>
							</div>
						</div> --%>
						
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								技术成熟度：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<input type="text" name="tecExp" value="${content.tecExp }" class="form-control" maxlength="200" />
								</div>
								<div class="col-xs-12 p-a-0">
									<label class="col-xs-6 form-control-label text-xs-left error-message red p-a-0">
										${tecExpCode }
									</label>
								</div>
							</div>
						</div>
						
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								专项领域：
							</label>
							<div class="col-xs-4">
								<select name="specialField" class="form-control" style="width: 12em;">
									<%
									Set<Entry<String,String>> entrySet = Contains.specialFieldMap.entrySet();
									Iterator<Entry<String, String>> iterator = entrySet.iterator();
									StringBuilder strbd = new StringBuilder();
									while(iterator.hasNext()) {
										Entry<String, String> next = iterator.next();
										strbd.append("<option value='");
										strbd.append(next.getKey());
										strbd.append("'");
										ContentUser content = (ContentUser) request.getAttribute("content");
										if(content != null && next.getKey().equals(content.getSpecialField())){
											strbd.append(" selected='selected'");
										}
										strbd.append(">");
										strbd.append(next.getValue());
										strbd.append("</option>");
									}
									out.print(strbd.toString());
									%>
								</select>
							</div>
							<label class="col-xs-6 form-control-label text-xs-left error-message red">
								${specialFieldCode }
							</label>
						</div>
		
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								技术成果简介：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<textarea name="content" id="content" style="height : 200px;border: 1px #cbd5d8 solid;" >${content.content}</textarea>
								</div>
								<div class="col-xs-12 p-a-0">
									<label class="col-xs-6 form-control-label text-xs-left error-message red p-a-0">
										${contentCode }
									</label>
								</div>
							</div>
						</div>
						
						<div class="container-fluid form-group">
							<label class="col-xs-2 form-control-label text-xs-left">
								附件：
							</label>
							<div class="col-xs-10">
								<div class="col-xs-12 p-a-0">
									<div class="clearfix">
										<div class="col-xs-9 p-a-0">
											<div class="span6 upload-img">
											<button type="button" class="btn">
												<i class="icon-upload"></i>上传附件
											</button>
											<input id="fileupload" name="file" type="file" multiple="multiple" />
										</div>
										<div class="progress" id="fileuploadBar" style="display: none;">
										    <div class="progress progress-bar-info" role="progressbar"
										    	aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
										    	id="fileuploadProcessBar" style="width: 0%;">
										        <span class="sr-only"></span>
										    </div>
										</div>
										<span style="text-align: center; font-size: 14px; color: gray;">请上传附件大小10M以内。</span>
										</div>
									</div>
									<div id="downLoadDiv" class="clearfix p-t-1">
										<c:if test="${!empty attachments}">
										<c:forEach items="${attachments }" var="attachment">
											<div class="col-xs-9 pull-left m-b-1 p-a-0">
												<button type="button" onclick="downloadAttachment('${attachment.filePath }','${attachment.fileName }')" title="${attachment.fileName }"
													class="btn btn-default btn-sm">
													<c:choose>
														<c:when test="${fn:length(attachment.fileName) > 20}">
															<c:set var="fileName"
																value="${fn:substring(attachment.fileName, 0, 20)}..." />
														</c:when>
														<c:otherwise>
															<c:set var="fileName" value="${attachment.fileName}" />
														</c:otherwise>
													</c:choose>
													<i class="icon wb-download" style="max-width: 200px;"></i>${fileName}
												</button>
												<button type="button" onclick="delAttachment(this,'${attachment.seqId }')" class="btn btn-danger btn-sm">
													<i class="icon wb-trash"></i>
													删除附件 
												</button>
												<input type="hidden" name="attachementId" value="${attachment.seqId }" />
											</div>
										</c:forEach>
										</c:if>
									</div>
								</div>
							</div>
						</div>
						
						<c:if test="${!empty result}">
						<div class="container-fluid form-group" id="errorMessageContent">
							<label class="form-control-label red">
								${result }
							</label>
						</div>
						</c:if>
						
						<div class="form-group text-xs-center">
							<button class="btn btn-primary" type="button" id="submitBtn">保存</button>		
						</div>
					</form>
			    </div>
		    </div>
		</div>
	</main>


	<%@ include file="/WEB-INF/jsp/importFooter.jsp"%>
	<%@ include file="/WEB-INF/jsp/importCommonJS.jsp"%>
	
	<script type="text/javascript" src="${basePath}/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="${basePath}/ueditor/ueditor.all.js"></script>
	<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/vendor/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.iframe-transport.js"></script>
	<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.fileupload.js"></script>
	<script type="text/javascript" src="${basePath}/js/jQuery-File-Upload-master/jquery.fileupload-process.js"></script>
	<script type="text/javascript" src="${basePath}/js/layer/layer.js"></script>
	<script type="text/javascript">
		window.UEDITOR_HOME_URL = "${basePath}/ueditor/";
		
		$(function(){
			setTimeout(function(){
				$("#errorMessageContent").slideUp();
			},2000);
			
			$("#changeInfoForm input").bind("focus",function(){
				$(".error-message").hide();
			});
			
			editor.addListener("focus",function(){
				$(".error-message").hide();
			})
			
			$("#submitBtn").bind("click",function(){
				var fileArray = [];
				var check = true;
				
				$("#changeInfoForm").find("input[type!='file']:visible,select,textarea").each(function(){
					if(!this.value){
						check = false;
						var label = $(this).closest("div.container-fluid.form-group").find("label.form-control-label.col-xs-2");
						var labelValue = label.eq(0).text().replace(/[：\:]\s*$/,"");
						var errorLabel = $(this).closest("div.container-fluid.form-group").find("label.form-control-label.error-message");
						errorLabel.text(labelValue + "不能为空");
						errorLabel.show();
					}
				});
				
				if(!check){
					return false;
				}
				
				$("#changeInfoForm input[name='attachementId']").each(function(){
					if(this.value && this.value.replace(/(^\s+)|(\s+$)/g,"").length > 0)
						fileArray.push(this.value);
				});
				
				$("#changeInfoForm")[0].attachementIds.value = fileArray.join("#");
				$("#changeInfoForm")[0].submit();
			});
		});
		
		var $textArea = $('#content');
		var editor = UE.getEditor('content',{

		     initialFrameHeight:450,//设置编辑器高度

		     scaleEnabled:true,
		     
		     autoFloatEnabled:false

		  });
		// 编辑器内容变化时同步到 textarea
		editor.addListener('contentChange', function() {
			editor.sync();
			
			// 触发验证
			$textArea.trigger('change');
		});
		
		$('#fileupload').fileupload({
			url: "${basePath}/uploadAttachment",
			autoUpload: true,
			iframe : true,
			maxNumberOfFiles : 3,
			add : function(e, data) {
				if (data.files[0].size > 1024*1024*10) {
					 window.layer.alert('上传文件大于10M！', {
						icon : 5
					});
					return;
				}
				
				if(data.files[0].name.length > 80){
					window.layer.alert('该文件名太长，请修改后再重试！', {
						icon : 5
					});
					return;
				}
				data.process().done(function() {
					$('#fileuploadBar').fadeIn();
					data.submit();
				});
			},
			progressall : function(e, data) {
				var progress = parseInt(data.loaded / data.total* 100, 10);
				$('#fileuploadProcessBar').css('width', progress + '%');
				$('#fileuploadProcessBar span.sr-only').text(progress + '%');
			},
			done:function(e,data){
				$('#fileuploadBar').fadeOut();
				$('#fileuploadProcessBar').css('width', '0%');
				$('#fileuploadProcessBar span.sr-only').text('0%');
				if(data && data.result) {
					var html = createAttachmentContent(data.result.id,data.result.fileName,data.result.url);
					$("#downLoadDiv").append(html);
					layer.msg("上传成功", {
						time: 1000,
					    icon: 1,
					    skin: 'layer-ext-moon'
					});
				} else {
					layer.msg("上传失败", {
						time: 2000,
					    icon: 2,
					    skin: 'layer-ext-moon'
					});
				}
			}
		});
		
		var createAttachmentContent = function(id,fileName,url){
			var fullFileName = fileName;
			if(fileName && fileName.length > 20){
				fileName = fileName.substring(0,20) + '...';
			}
			var str = '<div class="col-xs-9 pull-left m-b-1 p-a-0">';
			str += '<button type="button" onclick="downloadAttachment(\''+url+'\',\''+fullFileName+'\')" title="'+fullFileName+'" class="btn btn-default btn-sm">';
			str += '<i class="icon wb-download" style="max-width: 200px;"></i>'+fileName;
			str += '</button>';
			str += '<button type="button" onclick="delAttachment(this,\''+url+'\')" class="btn btn-danger btn-sm">';
			str += '<i class="icon wb-trash"></i>';
			str += '删除附件 ';
			str += '</button>';
			str += '<input type="hidden" name="attachementId" value="'+id+'" />';
			str += '</div>';
			return str;
		};
		
		function downloadAttachment(fileUrl,fileName){
			var form = document.createElement("form");
			form.action = "${basePath}/downloadAttachments";
			form.method = "post";
			form.target = "_blank";
			form.style.display = "none";
			var input = document.createElement("input");
			var input1 = document.createElement("input");
			input.name = "url";
			input.type = "hidden";
			input.value = fileUrl;
			input1.name = "fileName";
			input1.type = "hidden";
			input1.value = fileName;
			
			form.appendChild(input);
			form.appendChild(input1);
			
			document.body.appendChild(form);
			
			form.submit();
			document.body.removeChild(form);
		}
		
		function delAttachment(obj,attachmentId){
			layer.confirm('确定删除该文件吗？', {btn: ['确定','取消'] , icon:3 }, 
			function(){
				var al = layer.load();
				$.ajax({
					url : "${basePath}/manage/article/delAttachment",
					method: 'POST',
					data : {
						"attachmentId":attachmentId
					},
					dataType : 'html',
					success : function(data) {
						layer.close(al);
						if(data == "true" || data == true){
							parent.layer.msg("删除成功", {icon: 1});
							$(obj).parent().remove();
						}
						else{
							parent.layer.msg("删除失败", {icon: 2});
						}
					},
					error : function(){
						$mainModal.modal("close");
						layer.msg("连接服务器时遇到错误！", {icon: 2});
					}
				});
			});
		}
	</script>
</body>
</html>